<template>
    <div>
        <a-input ref="inputRef"  @focus="handleFocus" readonly="true" v-model="vehicleTypeName" :placeholder="$t('pleaseSelectType')" style="width: 100%" />
        <a-modal width="69.9%" v-model="visible" :title="$t('selectType')" @cancel="handleCancel" @ok="handleOk">
            <div class="modal-content__wrap">
                <div class="modal-content">
                    <VehicleTypeCard :id.sync="selectedId" @change="handleChange" :value="item" :key="item.id" v-for="(item, index) in listData"></VehicleTypeCard>
                </div>
                <div class="model-bottom">
                    <a-pagination @change="handlePageChange" :pageSize.sync="queryPage.pageSize" v-model="queryPage.pageNo" :total="queryPage.total" show-less-items />
                </div>
            </div>
        </a-modal>
    </div>
</template>


<i18n>
  {
    "zh-CN": {
      "selectType":"选择车辆类型",
      "pleaseSelectType":"请选择车辆类型"
    },
    "en-US": {
      "selectType":"Select vehicle type",
      "pleaseSelectType":"Please select the vehicle type"
    },
    "fr-FR": {
      "selectType":"Choisir le type de véhicule",
      "pleaseSelectType":"Veuillez sélectionner un type de véhicule"
    }
  }
</i18n>

<script>
import VehicleTypeCard from '../card/vehicleTypeCard.vue'
import { getAction } from '@/api/manage'
const listUrl = "/rental/ebike-type/list"; // 模块级别的常量  
export default {
    components:{
        VehicleTypeCard
    },
    props:{
        value:{
            type: String,
            default: ""
        },
        id:{
            type: String,
            default: ""
        }
    },
    data(){
        return {
            vehicleTypeName: "",
            visible: false,
            queryPage:{
                pageNo: 1,
                pageSize: 6,
                total: 0
            },
            listData:[],
            selectedData:{},
            selectedId: '',
        }
    },
    watch:{
        value:{
            handler(newVal){
                this.vehicleTypeName = newVal;
                this.list();
            },
            deep: true,
            immediate: true
        }
    },
    mounted(){

    },
    methods:{
        list(){
            let params = {};
            getAction(listUrl, Object.assign(params, this.queryPage)).then((res) => {
                if (res.success) {
                    this.listData = res.result.records;
                    this.queryPage.pageNo = res.result.current;
                    this.queryPage.pageSize = res.result.size;
                    this.queryPage.total = res.result.total;
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        handleFocus(){
            this.visible = true;
            this.$refs.inputRef.blur();
        },
        handleOk(){
            this.$emit("input", this.selectedData.carTypeName);
            this.$emit("update:id", this.selectedData.id);
            this.visible = false;
        },
        handleCancel(){
            this.visible = false;
        },
        handlePageChange(page, pageSize){
            this.queryPage.pageNo = page;
            this.list();
        },
        handleChange(item){
            this.selectedData = item;
        }
    }
}
</script>

<style lang="less" scoped>
.modal-content__wrap{
    .modal-content{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .model-bottom{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}

</style>